<template>
    <form method="post" style="height: 100%; width: 100%">
        <div style="width: 100%; float: left">
            <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 90%; height: 100%; float: left">
                <font style="font-size: 25px; font-family: 微软雅黑">栏目名称从导航带过来</font>
            </div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
        <div style="width: 100%; height: 100%">
            <div style="width: 20%; height: 100%; float: left;text-align:center;">
                材料列表<br />
                <el-link :underline="false" type="primary" @click="showurl('http://mail.163.com')">附件链接</el-link><br />
                <el-link :underline="false" type="primary" @click="showurl('http://www.baidu.com')">附件链接</el-link><br />
            </div>
            <div style="width: 79%; height: 100%; float: right">
                <div><el-button @click="getList()" class="bthNormal">增加材料</el-button></div>
                <div style="width: 100%; height: 100%" id="iddivframe">
                    <iframe id="idframe" src="" frameborder="0" style="width: 100%; height: 100%"></iframe>
                </div>
            </div>
        </div>
    </form>
</template>

<script>
import BaseForm from '../../BaseForm.vue';
export default {
  components: { BaseForm },
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            ruleForm: {
                dkh: '',
                qh: '',
                dh: '',
                xzb: '',
                yzb: ''
            },
            rules: {
                // xmname: [
                //     { required: true, message: '请输入项目名称', trigger: 'blur' }
                //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],

                dkh: [{ required: true, message: '请填写地块号', trigger: 'change' }],
                qh: [{ required: true, message: '请填写圏号', trigger: 'change' }],
                dh: [{ required: true, message: '请填写点号', trigger: 'change' }],
                xzb: [{ required: true, message: '请填写X坐标', trigger: 'change' }],
                yzb: [{ required: true, message: '请填写Y坐标', trigger: 'change' }]
            }
        };
    },
    created() {
        this.init();
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        init() {
            //判断路径有id值,做修改
            if (this.$route.query && this.$route.query.id) {
                //从路径获取id值
                const id = this.$route.query.id;
                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径没有id值，做添加
                //清空表单
                this.information = {};
            }
        },
        showurl(url) {
            $('#iddivframe').html('<iframe id="idframe" src="' + url + '" frameborder="0" style="width: 100%; height: 100%"></iframe>');
        },
        saveOrUpdate() {
            //判断修改还是添加
            //根据teacher是否有id
            if (!this.information.id) {
                //添加
                this.onSubmit();
            } else {
                alert('sss');
                //修改
                this.update();
            }
        },
        onSubmit() {
            label.save(this.information).then((Response) => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            });
        },
        tonew() {
            this.information = {};
        },
        shutdown() {
            window.close();
        },
        getInfo(id) {
            label.openInfo(id).then((response) => {
                this.information = response.data;
            });
        },
        update() {
            label.updateInfo(this.$route.query.id, this.information).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            });
        }
    }
};
</script>
<style>
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
#id_tabs div.el-tabs__content {
    padding: 0;
}
</style>